package layouts

import (
	"fmt"
	"github.com/templui/templui/internal/config"
	"github.com/templui/templui/internal/ctxkeys"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/utils"
)

templ BaseLayout(title, description string) {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			// Google
			<meta name="google-site-verification" content="lcKF60IRUofKfZpOIYKOD7xyvrL220KpjmGjJcflde4"/>
			// SEO
			@modules.SEO(title, description, ctx.Value(ctxkeys.URLPathValue).(string))
			// Preload fonts to prevent flickering
			<link rel="preload" href="/assets/fonts/geist/geist-variable.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
			<link rel="preload" href="/assets/fonts/geist/geist-mono-variable.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
			// Component JS files
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/avatar/avatar.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/calendar/calendar.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/carousel/carousel.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/chart/chart.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/code/code.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/collapsible/collapsible.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/copybutton/copybutton.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/datepicker/datepicker.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/dropdown/dropdown.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/input/input.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/inputotp/inputotp.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/label/label.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/dialog/dialog.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/popover/popover.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/progress/progress.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/rating/rating.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/selectbox/selectbox.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/sidebar/sidebar.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/slider/slider.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/tabs/tabs.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/tagsinput/tagsinput.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/textarea/textarea.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/timepicker/timepicker.min.js?v=" + utils.ScriptVersion }></script>
			<script defer nonce={ templ.GetNonce(ctx) } src={ "/components/js/toast/toast.min.js?v=" + utils.ScriptVersion }></script>
			// Plausible Analytics
			if config.AppConfig.GoEnv == "production" {
				<script defer data-domain="templui.io" src="https://plausible.axeladrian.com/js/script.js" nonce={ templ.GetNonce(ctx) }></script>
			}
			// Shiki Highlighter Script
			@modules.CodeHighlightingScript()
			// Tailwind CSS
			<link href="/assets/css/output.css" rel="stylesheet"/>
			// Custom CSS
			<link href="/assets/css/themes.css" rel="stylesheet"/>
			// HTMX
			<script nonce={ templ.GetNonce(ctx) } src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.4/dist/htmx.min.js"></script>
			// Set script nonce for HTMX // without this, HTMX will not work with CSP
			<meta
				name="htmx-config"
				content={ fmt.Sprintf(`{
			    "inlineScriptNonce": "%s"
			}`, templ.GetNonce(ctx)) }
			/>
			// Theme initialization - must run before body renders to prevent flash
			<script nonce={ templ.GetNonce(ctx) }>
				(function() {
					// Get current theme preference (system, light, or dark)
					function getThemePreference() {
						return localStorage.getItem('themePreference') || 'system';
					}
					
					// Apply theme based on preference
					const preference = getThemePreference();
					let isDark = false;
					
					if (preference === 'system') {
						// Use system preference
						isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
					} else {
						// Use explicit preference
						isDark = preference === 'dark';
					}
					
					// Apply theme immediately to prevent flash
					if (isDark) {
						document.documentElement.classList.add('dark');
					}
				})();
			</script>
		</head>
		<body
			class="transition-colors duration-200"
		>
			<div class="min-h-screen flex flex-col">
				{ children... }
			</div>
		</body>
		// HTMX
		<script nonce={ templ.GetNonce(ctx) }>
			// Active link updater
			document.body.addEventListener('htmx:afterSettle', () => {
				document.querySelectorAll('aside a').forEach(a => {
					a.classList.toggle('bg-accent', a.href === location.href);
				});
			});

			// Scroll to top after content swap
			document.body.addEventListener('htmx:afterSwap', (e) => {
				if (e.detail.target.id === 'main-content') {
					e.detail.target.scrollTop = 0;
				}
			});
		</script>
	</html>
}
